<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
    <template v-slot:expandRow="{ row }">
      <q-td class="bg-grey-2" colspan="100%">
        <table class="full-width">
          <q-tr class="bg-grey-2">
            <q-th>{{ `${$t('MapCore.MapDataCode')}` }}</q-th>
            <q-th>{{ `${$t('Misc.DataType')}` }}</q-th>
            <q-th>{{ `${$t('MapCore.BufferSequence')}` }}</q-th>
            <q-th>{{ `${$t('Misc.LockSource')}` }}</q-th>
          </q-tr>
          <q-tr v-for="item in row.items || []" :key="item.positionCode" class="bg-grey-2 text-center">
            <q-td>{{ item.positionCode }}</q-td>
            <q-td>{{ item.positionTypeName }}</q-td>
            <q-td>{{ item.buffer }}</q-td>
            <q-td>{{ item.lockSource }}</q-td>
          </q-tr>
        </table>
      </q-td>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails')}`" :menuBtn="false" :persistent="false"
           width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="2" headerWidth="100"></QInfo>
  </q-modal>
</template>

<script setup>

import { i18n } from 'boot/i18n'
import { yesOrNo } from 'src/enum/index.js'
import { computed, onMounted, ref } from 'vue'

const rowInfo = ref({})
const searchForm = ref({})
const modalVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/mapTunnel/list' })

const AccessModes = computed(() => {
  return [{
    label: i18n.t('Misc.AccessModeTip1'), value: '0'
  }, {
    label: i18n.t('Misc.AccessModeTip2'), value: '1'
  }]
})
const BordTypes = computed(() => {
  return [{
    label: i18n.t('MapCore.BordTypeTip1'), value: '0'
  }, {
    label: i18n.t('MapCore.BordTypeTip2'), value: '1'
  }]
})
const tableOption = computed(() => {
  return {
    searchLabelWidth: 70, canExpand: true, searchSpan: 4,
    column: [{
      label: `${i18n.t('MapCore.BordCode')}`, field: 'roadWayCode', isExpand: true, minWidth: 80
    }, {
      label: `${i18n.t('MapCore.BordName')}`, field: 'roadWayName', search: false, minWidth: 80
    }, {
      label: `${i18n.t('Misc.AccessMode')}`, field: 'inOutType', search: false,
      options: AccessModes.value, minWidth: 80
    }, {
      label: `${i18n.t('MapCore.RelatedMap')}`, field: 'mapCode', minWidth: 80
    }, {
      label: `${i18n.t('Misc.FeatureValueEnabled')}`, field: 'openCharacteristicValue', search: false,
      options: yesOrNo.value, useTag: true, minWidth: 80
    }, {
      label: `${i18n.t('Misc.FeatureValue')}`, field: 'characteristicValue', search: false, minWidth: 80, hide: true
    }, {
      label: `${i18n.t('MapCore.AvailableOutboundCapacity')}`, field: 'outCapacity', search: false, minWidth: 80
    }, {
      label: `${i18n.t('MapCore.LockedOutboundCapacity')}`, field: 'lockedOutCapacity', search: false, minWidth: 80,
      hide: true
    }, {
      label: `${i18n.t('MapCore.AvailableInboundCapacity')}`, field: 'inCapacity', search: false, minWidth: 80
    }, {
      label: `${i18n.t('MapCore.LockedInboundCapacity')}`, field: 'lockedInCapacity', search: false, minWidth: 80,
      hide: true
    }, {
      label: `${i18n.t('CarrierCore.ContainerType')}`, field: 'ctnrType', search: false, minWidth: 80
    }, {
      label: `${i18n.t('MapCore.BordType')}`, field: 'roadWayType', minWidth: 80, search: false,
      options: BordTypes.value
    }, {
      label: `${i18n.t('MapCore.BordStructureComplete')}`, field: 'roadWayCheck', search: false,
      options: yesOrNo.value, useTag: true, minWidth: 80, hide: true
    }, {
      label: `${i18n.t('AGVCore.ForkliftBordConfigCompleted')}`, field: 'roadWayCfgCheck', search: false,
      options: yesOrNo.value, useTag: true, minWidth: 80, hide: true
    }, {
      label: `${i18n.t('MapCore.BordFrozen')}`, field: 'roadWayFreeze', search: false,
      options: yesOrNo.value, useTag: true, minWidth: 80, hide: true
    }]
  }
})

const rowDblClick = (row, col = {}) => {
  if (col.field === 'roadWayCode') return
  rowInfo.value = row
  modalVisible.value = true
}
const formatSearchForm = () => ({ ...searchForm.value })
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  done && done()
}
onMounted(startSearch)
</script>